<template>
  <div class="icon_list">
    <div class="icon_item" v-for="item in iconList" :key="item">
      <SvgIcon :name="item"></SvgIcon>
      <p>{{ item }}</p>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import data from './data'
export default defineComponent({
  name: 'IconList',
  components: { SvgIcon },
  data() {
    return {
      iconList: data
    }
  }
})
</script>
<style lang="less" scoped>
.icon_list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  .icon_item {
    margin: 10px;
    width: 150px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
</style>
